<template>
	<header>
		<div class="header-box">
			<a v-link="{path:'/'}" class="header-logo">
				<img src="/resources/webSite/images/logo.png">
			</a>
			<!--导航-->
			<nav>
				<a v-for="data in nav" v-link="{path:'/articleList?id='+data._id}" :class="{'cur':$route.query.id == data._id}" v-text="data.name"></a>
			</nav>
			<!--搜索-->
			<div class="search-box">
				<!--输入框-->
				<input type="text" @keyup.enter="search" v-model="keywords" class="search-input" placeholder="search..."/>
				<!--搜索按钮-->
				<div class="search-btn" @click="search">
					<i class="iconfont">&#xe606;</i>
				</div>
			</div>
		</div>
		<div class="nav-btn" :class="{'open':showMenu}" @click="openMenu">
			<i class="iconfont">&#xe605;</i>
		</div>
	</header>
	<!--sidebar-->
	<sidebar-app :show-menu="showMenu"></sidebar-app>
	<div class="cover-box" v-if="showMenu" @click="openMenu"></div>
</template>
<script>
	var sidebar = require("./sidebar.vue");
	export default{
		data(){
			return {
				headerData:"",
				showMenu:false,
				nav:"",
				keywords:""
			}
		},
		created(){
			var data = "",
				th = this;
			//设置信息
			this.$http.get("/webSettings" , function(res){
				th.headerData = res.data;
			},"JSON");
		},
		components:{
			sidebarApp:sidebar
		},
		methods:{
			openMenu(e){
				e.preventDefault();
				this.showMenu = !this.showMenu;
			},
			search(e){
				if(this.keywords){
					this.$route.router.go("/search?keywords="+this.keywords);
				}else{
					alert("请输入您要搜索的关键词");
				};
			}
		},
		created(){
      var th = this;
      this.$http.get("/columnList" , function(data){
        th.nav = data.data;
      },"JSON")
    }
	};
</script>
